<template>
  <div class="app-container">
    <el-form ref="queryForm" :model="queryParams" :inline="true" label-width="80px" height="10px">
      <el-form-item label="商品编号" prop="goods_id">
        <el-input
          v-model="queryParams.goods_id"
          placeholder="请输入商品编号"
          clearable
          size="mini"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row v-show="_warehouse_out_id" :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          v-action="'warehouseOutSon@create'"
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
        >新增</el-button>
      </el-col>
      <el-col :span="0.5">
        <el-button
          v-action="'warehouseOutSon@wholeOut'"
          type="warning"
          plain
          icon="el-icon-receiving"
          size="mini"
          :disabled="multiple"
          @click="wholeOut"
        >一键出库</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          v-action="'warehouseOutSon@delete'"
          size="mini"
          plain
          type="danger"
          :disabled="multiple"
          @click="handleDel()"
        >删除
        </el-button>
      </el-col>
      <!--      <el-col :span="1.5">-->
      <!--        <el-button-->
      <!--          type="primary"-->
      <!--          plain-->
      <!--          icon="el-icon-plus"-->
      <!--          size="mini"-->
      <!--          @click="fast"-->
      <!--        >快速出库</el-button>-->
      <!--      </el-col>-->
    </el-row>

    <el-table v-loading="loading" fit border :data="list" size="mini" @row-click="rowClick" @selection-change="handleSelectionChange">
      <!-- <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="出库主单编号">
              <span>{{ props.row.warehouse_out_id }}</span>
            </el-form-item>
            <el-form-item label="出库明细编号">
              <span>{{ props.row.warehouse_out_son_id }}</span>
            </el-form-item>
            <el-form-item label="商品编号">
              <span>{{ props.row.goods_id }}</span>
            </el-form-item>
            <el-form-item label="HSCODE">
              <span>{{ props.row.HSCODE }}</span>
            </el-form-item>
            <el-form-item label="商品中文名称">
              <span>{{ props.row.goods_Cname }}</span>
            </el-form-item>
            <el-form-item label="商品英文名称">
              <span>{{ props.row.goods_Ename }}</span>
            </el-form-item>
            <el-form-item label="供应商名称">
              <span>{{ props.row.supplier_name }}</span>
            </el-form-item>
            <el-form-item label="制造商名称">
              <span>{{ props.row.manufacturer_name }}</span>
            </el-form-item>
            <el-form-item label="包装编号">
              <span>{{ props.row.packing_id }}</span>
            </el-form-item>
            <el-form-item label="包装条形码">
              <span>{{ props.row.p_barcode }}</span>
            </el-form-item>
            <el-form-item label="创建时间">
              <span>{{ props.row.created_at }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column> -->
      <el-table-column type="selection" align="center" :selectable="selectable" height="50px" />
      <el-table-column
        label="行号"
        type="index"
        :index="indexMethod"
      />
      <el-table-column prop="serial_number" label="成品料号" align="center" width="serial_number" />
      <el-table-column prop="goods_name" label="商品名称" align="center" width="120" />
      <el-table-column prop="sku" label="型号" align="center" width="120" />
      <el-table-column prop="new_carton_size" label="尺寸" align="center" width="120" />
      <el-table-column prop="describe" label="商品描述" align="center" show-overflow-tooltip />
      <el-table-column prop="goods_name" label="包装(数量/单位)" align="center" width="160">
        <template v-slot="scope">
          {{ scope.row._packing_num + '('+scope.row._packing_hierarchy+')' }}
        </template>
      </el-table-column>
      <el-table-column prop="number" label="要求出库数量" align="center" width="120" />
      <el-table-column prop="box_number" label="商品箱数" align="center" />
      <el-table-column prop="pick_number" label="拣货数量" align="center" />
      <!--      <el-table-column prop="stock_number" label="仓库数量" align="center" />-->
      <el-table-column prop="out_number" label="出库数量" align="center" />
      <el-table-column prop="status" label="出库状态" align="center">
        <template v-slot="scope">
          <span v-if="scope.row.status === '0'">未出库</span>
          <span v-else-if="scope.row.status === '1'">全部出库</span>
          <span v-else-if="scope.row.status === '2'">部分出库</span>
        </template>
      </el-table-column>

      <!-- <template slot-scope="scope"> -->
      <!-- <el-button
            v-if="scope.row.status !== '1'"
            v-action="'pick@index'"
            size="mini"
            type="success"
            @click="picking(scope.row)"
          >拣货
          </el-button>
          <el-button
            size="mini"
            type="info"
            @click="seeInfo(scope.row)"
          >捡货列表
          </el-button> -->
      <!--          <el-button-->
      <!--            v-if="scope.row.status === '1'"-->
      <!--            size="mini"-->
      <!--            type="info"-->
      <!--            @click="seeInfo(scope.row)"-->
      <!--          >详情-->
      <!--          </el-button>-->
      <!-- <el-button
            v-if="scope.row.status === '0'"
            v-action="'warehouseOutSon@update'"
            size="mini"
            type="primary"
            @click="handleEdit(scope.row)"
          >修改
          </el-button> -->
      <!-- <el-button
            v-if="scope.row.status === '0'"
            v-action="'warehouseOutSon@delete'"
            size="mini"
            type="danger"
            @click="handleDel(scope.row)"
          >删除
          </el-button>
        </template> -->
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="queryParams.page" :limit.sync="queryParams.limit" @pagination="getList" />
    <!-- 新增/修改 -->
    <AddEdit
      ref="addEdit"
      :open.sync="open"
      :open1.sync="open1"
      :title="title"
      :warehouseoutid="warehouse_out_id"
      :form="form"
      :select-data="selectData"
      :residue="residueNum"
      :residues="numbers"
      :exist-number="exist_number"
      @getList="getList"
    />
    <!-- 快速出库 -->
<!--    <Fast :openx.sync="openx" :title="title" :warehouseoutid="warehouse_out_id" :form="form" :select-data="selectData" @getList="getList" />-->
    <!--  查看拣货详情-->
    <SeeInfo :opens.sync="opens" :titles="titles" :lists="lists" :outsonid="currentPickWarehouseOutSonId" />

  </div>
</template>
<script>
import { warehouseOutSonList, delWarehouseOutSon, warehouseOutSonWhole } from '@/api/storehouse'
import { getIndexlist } from '@/api/storehouse'
import AddEdit from './AddEdit'
import SeeInfo from './SeeInfo'
export default {
  name: 'Index',
  components: {
    AddEdit,
    SeeInfo
  },
  props: {
    _warehouse_out_id: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      multipleSelection: [],
      id: '',
      currentPickWarehouseOutSonId: 0,
      // 遮罩层
      loading: false,
      open: false,
      title: '',
      open1: false,
      opens: false,
      openx: false,
      titles: '',
      // 非多个禁用
      multiple: true,
      // 总条数
      total: 0,
      // 表格数据
      list: [],
      form: {},
      lists: [],
      selectData: [],
      // 查询参数
      queryParams: {
        page: 1,
        limit: 20,
        goods_id: undefined
      },
      ids: [],
      warehouse_out_id: '',
      AllNumber: 0,
      numbers: 0,
      exist_number: 0
    }
  },
  computed: {
    residueNum() {
      var num = 0
      if (this.list instanceof Array) {
        this.list.forEach(item => {
          num += item.number
        })
      }
      console.log('33334444', this.list, this.AllNumber, num)
      if (isNaN(num)) {
        return 0
      } else {
        return this.AllNumber - num
      }
    }
  },
  created() {
    // console.log(111111, this._warehouse_out_id)
    if (this._warehouse_out_id) {
      this.getList()
    } else {
      this.loading = false
    }
  },
  methods: {
    indexMethod(index) {
      return (this.queryParams.page - 1) * (this.queryParams.limit) + index + 1
    },
    getData(form) {
      // console.log(22222, id)
      // this._warehouse_out_id = id
      // this.form1 = form
      this.getList()
    },
    rowClick(row, column, event) {
      this.$emit('getRow', row, this.residueNum)
    },
    /** 查询列表 */
    getList() {
      console.log(this._warehouse_out_id)
      const that = this
      this.loading = true
      this.queryParams['warehouse_out_id'] = this.$route.query.warehouse_out_id || this._warehouse_out_id
      this.AllNumber = this.$route.query.AllNumber
      console.log('this.$route.query.AllNumber', this.$route.query)
      this.warehouse_out_id = this.$route.query.warehouse_out_id || this._warehouse_out_id
      warehouseOutSonList(this.queryParams).then(response => {
        that.loading = false
        console.log('res', response)
        if (response.code === 10000) {
          that.list = response.data
          that.$emit('emptyHide', false)
          that.list.forEach(item => {
            if (item.status == '1') {
              item.disabled = 'disabled'
            }
          })
          that.total = response.count
        }
      })
    },
    /**
     * 快速出库
     */
    fast() {
      this.form = {}
      this.openx = true
      this.title = '快速出库'
    },
    selectable(row, rowIndex) {
      // 索引是从0开始，条件1是指只有第2行数据不被禁用
      // console.log(row)
      if (row.disabled === 'disabled') {
        return false // 禁用
      } else {
        return true // 不禁用
      }
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.form = {}
      // this.$nextTick(()=>{
      //   this.$refs.addEdit.getForm(this.form1)
      // })
      this.open = true
      this.title = '添加'
      // this.nex
    },
    /** 编辑按钮操作 */
    handleEdit(row) {
      // row.packing_id = [row.goods_id, row.packing_id] // 遵循packing_id值规则 包含商品编号和包装编号
      // this.form = row
      this.form = JSON.parse(JSON.stringify(row))
      this.exist_number = row.number
      this.open = true
      this.title = '编辑'
    },
    /** 删除按钮操作 */
    handleDel() {
      const that = this
      const params = {
        id: that.ids
      }
      that.$confirm('是否删除该数据', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function() {
        // that.loading = true
        delWarehouseOutSon(params).then(response => {
          console.log(response)
          that.loading = false
          if (response.code === 10000) {
            that.$notify.success(response.message)
            that.getList()
          } else {
            that.$notify.error(response.message)
          }
        })
      }).catch(() => {
      })
    },
    /** 拣货详情 */
    // seeInfo(row) {
    //   getIndexlist({ warehouse_out_son_id: row.warehouse_out_son_id }).then(response => {
    //     if (response.code === 10000) {
    //       this.lists = response.data
    //       this.opens = true
    //       this.titles = '拣货详情'
    //       this.currentPickWarehouseOutSonId = row.warehouse_out_son_id
    //     }
    //   })
    // },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams = {
        page: 1,
        limit: 20,
        goods_id: undefined
      }
      this.handleQuery()
    },
    /** 拣货 */
    picking(row) {
      this.$router.push({
        path: '/stock/pick',
        query: {
          warehouse_out_id: row.warehouse_out_id,
          warehouse_out_son_id: row.warehouse_out_son_id
          // number: row.number
        }
      })
    },
    /** 选中的项 */
    handleSelectionChange(selection) {
      // console.log(selection)
      this.multipleSelection = selection
      this.ids = selection.map(item => item.id)
      this.multiple = !selection.length
    },
    /** 一键出库 */
    wholeOut() {
      const that = this
      that.$confirm('确认出库吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function() {
        // console.log(that.ids)
        let status = ''
        let hang = 0
        that.list.forEach(function(item,index) {
          if(that.ids.includes(item.id)){
            let len = item.back_sn.split(',').length
            if(item.if_back_sn == 1 && item.number != len){
              hang = 1 + (that.queryParams.page - 1) * that.queryParams.limit + index
              status = '行号 ' + hang +' 编号错误'
            }
          }
        })
        if(status){
          that.$notify.error(status)
          return false
        }
        that.loading = true
        warehouseOutSonWhole({ warehouse_out_son_id: that.ids, warehouse_out_id: that.warehouse_out_id }).then(response => {
          that.loading = false
          if (response.code === 10000) {
            that.$notify.success(response.message)
            that.getList()
          } else {
            that.$notify.error(response.message)
          }
        }).catch(() => {
          that.loading = false
        })
      })
    }
  }
}
</script>
<style scoped>
.el-button {
    margin-left: 0 !important;
}
.el-col{
  padding-left: 0 !important;
  padding-right: 0 !important;
}
</style>

